<template>
<!-- 小型播放器和大型播放器控制 -->
  <div class="playControl">
    <audio
      controls
      autoplay
      :src="currentPlaySongUrl"
      style="height: 0px;"
      ref="audio"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeupdate"
      @ended="playNextSong"
    ></audio>
    <PlayBar 
      v-if="!isFullScreen"
      :isFullScreen.sync="isFullScreen"
      :currentPlaySong="currentPlaySong"
      :playing="playing"
      @list="show=$event"
      :currentTime="currentTime"
      :allTime="allTime"
    />
    <Playpage 
     :currentPlaySong="currentPlaySong"
      v-if="isFullScreen"
      :isFullScreen.sync="isFullScreen"
      :playing="playing"
      @update:playing="$emit('update:playing',$event)"
      :currentTime="currentTime"
      :allTime="allTime"
      @update:currentTime="onUpdateCurrentTime"
      @showlist="show = $event"
      :playMode="playMode"
      @update:playMode="playMode = $event"
      @playLastSong="playLastSong"
    />
    <!-- 播放列表层 -->
    <section :class="{ show : !show}">
      <transition name="fade">
        <div class="mask" @click="show=false" v-if="show"></div>
      </transition>
      <transition name="slide">
        <ul class="list" v-if="show">
          <HomeMusicItemSongBody
            v-for="(item,index) in (gedan.tracks || gedan)" 
            :key="item.id" 
            :item="item" 
            :order="index+1"
            @click.native="$emit('update:currentPlaySong',item)"
            :currentPlaySongId="currentPlaySongId"
            :playing="playing"
          />
        </ul>
      </transition>
    </section>
  </div>
</template>

<script>
import PlayBar from '@/components/PlayBar.vue'
import HomeMusicItemSongBody from '@/components/HomeMusicItemSongBody.vue'
import Playpage from './Playpage.vue'


export default {
  name: 'playControl',
  props: ["currentPlaySong","playing","currentPlaySongId","gedan"],
  components: {
    PlayBar,
    Playpage,
    HomeMusicItemSongBody,
  },
  data: function(){
    return{
      isFullScreen : false,
      currentTime: 0,
      allTime: 0,
      show: false,
      playMode: "sx",
    }
  },
  computed: {
    currentPlaySongUrl: function(){
      if (!this.currentPlaySong) return "";
      return `https://music.163.com/song/media/outer/url?id=${this.currentPlaySong.id}.mp3`;
    },
  },
  methods: {
    onUpdateCurrentTime: function(value){
      this.$refs.audio.currentTime = value*1;
    },
    onPlay: function(){
      // console.log("播放");
      this.$emit("update:playing", true);
    },
    onPause: function(){
      // console.log("暂停");
      this.$emit("update:playing", false);
    },
    onTimeupdate: function(){
      var currentTime = this.$refs.audio.currentTime;
      var allTime = this.$refs.audio.duration;
      this.currentTime = currentTime;
      this.allTime = allTime;
    },
    playNextSong: function(){
      var nextSong;
      var currentIndex;
      var list = this.gedan.tracks ? this.gedan.tracks : this.gedan;
      switch(this.playMode){
        case "sx":
          console.log("顺序");
          currentIndex = list.findIndex(
            item => item.id == this.currentPlaySongId
          );
          var nextIndex =
            currentIndex === list.length - 1 ? 0 : currentIndex + 1;
            nextSong = list[nextIndex];
          break;
        case "sj":
          console.log("随机");
          currentIndex = list.findIndex(
            item => item.id == this.currentPlaySongId
          );
          var randomSong = list.filter(
            (item) => item.id !== this.currentPlaySongId
          );
          nextSong = randomSong[ Math.floor(Math.random() * randomSong.length) ];
          break;
        case "xh":
          console.log('循环');
            currentIndex = list.findIndex(
              item => item.id == this.currentPlaySongId
            );
            nextSong = list[currentIndex];
          break;
        default:
          break;
      }
      this.$emit("update:currentPlaySong", nextSong);
      if(this.playMode == 'xh'){
        this.$refs.audio.play();
      }
    },
    playLastSong(){
      var nextSong;
      var currentIndex;
      var list = this.gedan.tracks ? this.gedan.tracks : this.gedan;
      switch(this.playMode){
        case "sx":
          currentIndex = list.findIndex(
            item => item.id == this.currentPlaySongId
          );
          var nextIndex =
            currentIndex === 0 ? list.length - 1 : currentIndex - 1;
            nextSong = list[nextIndex];
          break;
        case "sj":
          currentIndex = list.findIndex(
            item => item.id == this.currentPlaySongId
          );
          var randomSong = list.filter(
            (item) => item.id !== this.currentPlaySongId
          );
          nextSong = randomSong[ Math.floor(Math.random() * randomSong.length) ];
          break;
        case "xh":
            currentIndex = list.findIndex(
              item => item.id == this.currentPlaySongId
            );
            nextSong = list[currentIndex];
          break;
        default:
          break;
      }
      this.$emit("update:currentPlaySong", nextSong);
      if(this.playMode == 'xh'){
        this.$refs.audio.play();
      }
    }
  },
  watch: {
    currentTime: function(){
      this.onTimeupdate();
    }
  }
  
}
</script>

<style lang='less' scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
.slide-enter, .slide-leave-to {
  transform:  translateY(60vh);
}
.slide-enter-to, .slide-leave {
  transform:  translateY(0px);
}

    .playControl{
      width: 100%;
      position: fixed;
      top: 100%;
      transform: translateY(-100%);
      z-index: 100;
    }
    section{
      .mask{
        // position: absolute;
        width: 100vw;
        height: 100vh;
        background-color: rgba(114, 108, 109, 0.5);
      }
      .list{
        position: absolute;
        bottom: 0;
        left: calc(100vw - 90vw);
        margin: 0 auto;
        margin-bottom: 20px;
        border-radius: 25px;
        background-color: white;
        height: 60vh;
        width: 80vw;
        overflow-y: auto;
      }
    }
    .show{
      display: none;
    }
</style>
